<!--
* @Author: zhangjing
* @Date: 2025-04-24 14:38:46
* @Description: 分配已有病人=>
-->
<template>
  <globalModal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <a-form :form="form" autocomplete="off" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row :gutter="18">
        <a-col :span="8">
          <a-card size="small" :bordered="false" :head-style="{ padding: '2px 0' }" :body-style="{ padding: 0 }">
            <div slot="title">
              已选
              <b style="color: #0a8783">{{ selectedRowKeys.length }}</b>
              位医生
            </div>
            <a-table
              class="table-wrapper"
              :pagination="false"
              size="small"
              :columns="columns1"
              rowKey="detailId"
              :scroll="{ y: 260, x: 'max-content' }"
              bordered
              :data-source="selectedTable"
            >
              <span slot="operation" slot-scope="text, record, index" class="operation">
                <a href="javascript:;" title="删除" class="del" @click="handleDeleteSelected(index)">删除</a>
              </span>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="16">
          <a-form layout="inline">
            <!-- 固定条件 -->
            <a-form-item label="姓名">
              <a-input v-model="filter.realName" style="width: 200px" placeholder="请输入姓名" />
            </a-form-item>
            <a-form-item label="联系方式"><a-input v-model="filter.phone" style="width: 200px" placeholder="请输入联系方式" /></a-form-item>
            <!-- 按钮 -->
            <a-space class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery"> 搜索 </a-button>
              <a-button class="ant-btn-yellow" @click="searchReset">清除</a-button>
            </a-space>
          </a-form>
          <s-table
            bordered
            :columns="columns"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onSelect: onSelect,
              onSelectAll: onSelectAll,
            }"
            :data="loadListData"
            rowKey="doctorId"
            ref="table"
            :scroll="{ y: 260, x: 'max-content' }"
            size="small"
            :isFirstLoad="false"
          ></s-table>
        </a-col>
      </a-row>
    </a-form>
  </globalModal>
</template>

<script>
import { ModalMixins, rowSelection } from "@/mixins";
import { clearDeep, priceFormat } from "@/utils/base";
import { doctorManageapi } from "@/api";
import QS from "qs";

const columns = [
  {
    title: "姓名",
    dataIndex: "realName",
    key: "realName",
    width: 220,
  },
  {
    title: "联系方式",
    dataIndex: "phone",
    key: "phone",
  },
];
const columns1 = [
  {
    title: "姓名",
    dataIndex: "realName",
    key: "realName",
    width: 100,
  },
  {
    title: "联系方式",
    dataIndex: "phone",
    key: "phone",
    ellipsis: true,
    width: 170,
  },
  {
    title: "操作",
    key: "operation",
    dataIndex: "operation",
    scopedSlots: {
      customRender: "operation",
    },
  },
];
export default {
  name: "AddSaleOrDieApplyModal",
  mixins: [ModalMixins, rowSelection],
  props: {
    farmList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      columns: columns,
      columns1: columns1,
      filter: {
        realName: "",
        phone: "",
      },
      selectedRowKeys: [],
      selectedTable: [],
      deptId: "",
    };
  },
  created() {},
  methods: {
    show(deptId, selectDoctorIds) {
      this.selectedRowKeys = [];
      this.selectedTable = [];

      this.visible = true;
      this.deptId = deptId;
      this.$nextTick(() => {
        this.$refs.table.refresh();
      });
      setTimeout(() => {
        if (selectDoctorIds && selectDoctorIds.length > 0) {
          this.selectedRowKeys = selectDoctorIds.map((item) => item.doctorId);
          console.log("selectDoctorIds", selectDoctorIds);
          this.selectedTable = selectDoctorIds.map((item) => {
            const items = {
              doctorId: item.doctorId,
              realName: item.realName,
              phone: item.phone,
            };
            return items;
          });
        }
      }, 500);
    },
    loadListData(parameter) {
      const params = Object.assign(
        {},
        {
          pageNum: parameter.pageNum,
          pageSize: parameter.pageSize,
          orgId: this.globalOrgId || "",
          deptId: this.deptId,
        },
        this.filter
      );
      return this.$postAction(doctorManageapi.doctorUrl.getList, params).then((res) => {
        console.log("res", res);
        this.list = res.data.list;
        return res.data;
      });
    },
    searchQuery() {
      this.$refs.table.refresh();
    },
    searchReset() {
      this.selectedRowKeys = [];
      this.selectedTable = [];
      this.filter = {
        realName: "",
        phone: "",
      };
      this.$refs.table.refresh();
    },

    onSelect(record, selected, selectedRows) {
      console.log(record, selected, selectedRows);
      if (selected) {
        this.selectedRowKeys.push(record.doctorId);
        this.selectedTable.push(record);
      } else {
        const index = this.selectedRowKeys.findIndex((item) => item == record.doctorId);
        this.handleDeleteSelected(index);
      }
    },
    onSelectAll(selected, selectedRows, changeRows) {
      console.log("selected", selected, selectedRows, changeRows);
      const changeRowsId = changeRows.map((item) => item.doctorId);
      if (selected) {
        this.selectedRowKeys = [...this.selectedRowKeys, ...changeRowsId];
        this.selectedTable = [...this.selectedTable, ...changeRows];
      } else {
        const selectedTable = [];
        const selectedRowKeys = [];
        this.selectedTable.forEach((item) => {
          if (!changeRowsId.includes(item.doctorId)) {
            selectedTable.push(item);
            selectedRowKeys.push(item.doctorId);
          }
        });
        this.selectedRowKeys = [...selectedRowKeys];
        this.selectedTable = [...selectedTable];
      }
    },
    handleDeleteSelected(index) {
      this.selectedTable.splice(index, 1);
      this.selectedRowKeys.splice(index, 1);
    },
    handleOk() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.error("请至少选择一位医护");
        return false;
      }
      this.$emit("selectDoctor", this.selectedTable);
      this.form.resetFields();
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.table-page-search-submitButtons {
  margin-top: 4px;
  .ant-btn-blue,
  .ant-btn-yellow {
    .iconfont {
      font-size: 22px;
    }
  }
  .ant-btn-blue {
    color: #fff;
    background-color: #3b74f8;
    border-color: #3b74f8;
  }

  .ant-btn-yellow {
    color: #fff;
    background-color: rgb(248, 191, 59);
    border-color: rgb(248, 191, 59);
  }
}
/deep/ .table-wrapper .operation {
  line-height: 1;

  a {
    &.del {
      color: #d43030;
    }
    &.edit {
      color: #0a8783;
    }
  }
  a + a {
    margin-left: 12px;
  }
}
/deep/.ant-form {
  .ant-form-item {
    margin-bottom: 0;
  }
}
</style>
